.spaces {
  --blue-1: #3740ff;
  --blue-2: #3c82ff;
  --blue-3: #3fc4ff;
  --color-transparent-img-mask: transparent;
  --auto-grid-min-item-size: 310px;

  audio {
    width: 250px;
    @include media-query('md') {
      width: 100%;
    }
  }

  .wrapper.spaces--past {
    padding-inline: 0;
    margin-inline: 0;
    @include media-query('md') {
      padding-inline: $global-gutter;
      margin-inline: auto;
    }
  }

  .hero, .hero p {
    background: none;
    color: #fff;
  }

  header {
    margin-bottom: map-get($gorko-space-scale, 'size-1');
    min-height: 740px;
    position: relative;
  }

  header:before {
    position: absolute;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    background-image: url('https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/3a8feEJ8tNYtUQRUHPER.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom left;

    @include media-query('md') {
      background-image: url('https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/3tW171hjep8z4WvpAvkw.svg');
    }
  }

  .hero__columns {
    align-items: center;
  }

  // Cards

  .card__header {
    background-image: url('https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/x7xXPnsdyuEsWENvc0oZ.svg');
    background-size: cover;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;

    .avatar {
      --avatar-size: 96px;
      --avatar-gap: 6px;
    }
  }

  .card {
    &:nth-child(3n+1)  .card__header {
      --color-core-bg: #3740ff;
      --color-action-bg-primary: var(--blue-3);
    }

    &:nth-child(3n+2) .card__header {
      background-image: url('https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/Ays4p05JflBuEf9Jn7lg.svg');
      --color-core-bg: #3c82ff;
      --color-action-bg-primary: var(--blue-1)
    }

    &:nth-child(3n+3) .card__header {
      background-image: url('https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/GfTxIFG0aFNwHR9x5HpU.svg');
      --color-core-bg: #3fc4ff;
      --color-action-bg-primary: var(--blue-2)
    }

    &.hidden {
      display: none;
    }

    .card__content {
      text-align: initial;
    }
  }


  // Avatars

  .avatars {
    overflow: hidden;
    padding-inline-end: 0;
    text-align: right;
    white-space: nowrap;
  }

  .avatar {
    --avatar-size: 32px;
    --avatar-gap: 2px;
    min-width:  var(--avatar-size);
    display: inline-block;
    border: 3px solid var(--color-action-bg-primary);
    box-shadow: 0 0 0 var(--avatar-gap) var(--color-core-bg);

    &:first-child {
      --avatar-gap: 0;
    }

    img {
      display: inline-block;
    }

    @include media-query('md') {
      --avatar-size: 72px;
      --avatar-gap: 4px;
    }
  }

  img.avatar {
    --avatar-offset: -0.3;
  }

  // Set a bigger avatar offset if there are 5 or 6 hosts, so that they fit.
  img.avatar:first-child:nth-last-child(5),
  img.avatar:first-child:nth-last-child(5) ~ img.avatar,
  img.avatar:first-child:nth-last-child(6),
  img.avatar:first-child:nth-last-child(6) ~ img.avatar {
    --avatar-offset: -0.5;
  }

  img.avatar + img.avatar,
  .card .avatar + .avatar {
    margin-left: calc(var(--avatar-size) * var(--avatar-offset));
  }

  // Hosts

  ul.hosts {
    list-style: none;
    padding: 0;
  }

  .host {
    padding-right: 1em;
    display: block;

    @include media-query('md') {
      display: inline;
    }

    .pill {
      margin-inline: 1em;
    }
  }

  // Adjustments
  .icon-button {
    color: var(--color-action-bg-primary);
  }

  table {
    width: 100%;

    td {
      vertical-align: top;
      @include media-query('md') {
        vertical-align: middle;
      }
    }
  }

  p {
    color: var(--color-mid-text);
  }

  .ellipsis__more {
    display: none;
  }

  @include media-query('md') {
    .ellipsis__more {
      display: block;
    }
  }

  // Mobile

  td.eyebrow {
    display: none;
    @include media-query('md') {
      display: table-cell;
    }
  }

  .sm-only {
    @include media-query('md') {
      display: none;
    }
  }

}